const editGroupItemTemplate =
`
<el-dialog
        title="修改"
        :visible.sync="visible"
        width="420px">
    <p><span>Code</span><span class="float-right">{{item.code}}</span></p>
    <p><span>Name</span><span class="float-right">{{item.name}}</span></p>
    <div style="display: flex; align-items: center; justify-content: space-between;">
        <span>Count</span>
        <el-input style="max-width: 300px;" v-model="item.count"></el-input>
    </div>
    <div style="display: flex; align-items: center; justify-content: space-between;">
        <span>Price</span>
        <el-input style="max-width: 300px;" v-model="item.price"></el-input>
    </div>
    <div style="display: flex; align-items: center; justify-content: space-between;">
        <span>Sort</span>
        <el-input style="max-width: 300px;" v-model="item.sort"></el-input>
    </div>
    <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="updateItem">确 定</el-button>
    </span>
</el-dialog>
`

Vue.component('edit-group-item', {
    props: {
        itemInEditing: Object,
        closeDialog: Function,
        visible: Boolean
    },
    data: function () {
        return {
            item: this.itemInEditing || {}
        }
    },
    watch: {
        visible: function (val) {
            if (val) {
                this.item = { ...this.itemInEditing }
            }
        }
    },
    methods: {
        updateItem: async function () {
            const res = await axios
                .put(`/api/group/item?id=${this.item.id}&sort=${this.item.sort || this.itemInEditing.sort}&count=${this.item.count || ''}&price=${this.item.price || ''}`)
            if (res.status === 200) {
                this.closeDialog()
            }
        },
    },
    template: editGroupItemTemplate
})
